<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
	href="@{'/public/stylesheets/home.css'}">

<link rel="stylesheet" type="text/css"
	href="@{'/public/stylesheets/slider.css'}">

<link rel="stylesheet" type="text/css"
	href="@{'/public/stylesheets/nivo-slider.css'}">

<script type="text/javascript"
	src="@{'/public/javascripts/jquery-1.4.2.min.js'}"></script>

<script type="text/javascript"
	src="@{'/public/javascripts/jquery-1.3.2.min.js'}"></script>

<script type="text/javascript"
	src="@{'/public/javascripts/HomeJs/jquery1.3.js'}"></script>

<script type="text/javascript"
	src="@{'/public/javascripts/HomeJs/jquery-ui-1.8.13.custom.min.js'}"></script>

<script type="text/javascript"
	src="@{'/public/javascripts/HomeJs/csstransform.js'}"></script>

<script type="text/javascript"
	src="@{'/public/javascripts/HomeJs/cssrotate.js'}"></script>

<script type="text/javascript"
	src="@{'/public/javascripts/HomeJs/jstackmenu.js'}"></script>
	
<script type="text/javascript"
	src="@{'/public/javascripts/HomeJs/jquery.li-scroller.1.0.js'}"></script>	




<script type="text/javascript"
	src="@{'/public/javascripts/FancyBox/jquery.fancybox-1.3.4.pack.js'}"></script>

<link rel="stylesheet" type="text/css"
	href="@{'/public/stylesheets/jquery.fancybox-1.3.4.css'}"
	media="screen">

<script type="text/javascript"
	src="@{'/public/javascripts/FancyBox/jquery.easing-1.3.pack.js'}"></script>

<script type="text/javascript"
	src="@{'/public/javascripts/FancyBox/jquery.mousewheel-3.0.4.pack.js'}"></script>

<script type="text/javascript">

$(function(){
    $("ul#ticker01").liScroll({travelocity: 0.10});
});

</script>

<script>
	jQuery(document).ready(function() {
		var stack = jQuery('#stack ul').stackmenu();
		jQuery('#stack .trigger').click(function() {
			stack.stackmenu('toggle');
			stack.stackmenu('option', 'direction', 'bottom');
		});
	});
</script>

<script type="text/javascript">
	browsername = navigator.appName;

	{
		if (browsername.indexOf("Microsoft") != -1) {

			alert("You are using Internet Explorer which is not compatible with our website, We are working on these comptability issues"
					+ '\n' + "Please use Chrome, Firefox or Opera");

		}
	}
</script>

<script type="text/javascript">
	$(document).ready(function() {

		$("a#how").fancybox({
			'titlePosition' : 'inside'

		});

		$("a#inline").fancybox({
			'hideOnContentClick' : true
		});

	});
</script>

#{get 'moreScripts' /}
</head>

<body>

	<div id="main">
		<div id=header>

			<div id="logo">
				<a href="@{Home.home()}"><img
					src="@{'/public/images/Home/LogoS.png'}" alt="share" title="Menu"
					height="100%" width="100%" /> </a>
			</div>



			<div id="stack">

				<div class="trigger">

					<img src="@{'/public/images/Home/menu.png'}" alt="share"
						title="Menu" />
				</div>
				<ul class="ui-stackmenu">
					<li class="ui-stackmenu-item" style="opacity: 1; top: -44px">
						<a href=""> <span class="title">Home</span> <img
							src="@{'/public/images/Home/Home.png'}" alt="Home" width="32"
							height="32"> </a>
					</li>





					<li class="ui-stackmenu-item" style="opacity: 1; top: -88px">
						<a id="inline" href="#data"> <span class="title">About</span>
							<img src="@{'/public/images/Home/About.png'}" alt="About"
							width="32" height="32"> </a>
					</li>

					<li class="ui-stackmenu-item" style="opacity: 1; top: -88px">
						<a title="How it works" id="how"
						href="@{'/public/images/Home/howitworks.png'}"> <span
							class="title">How it works</span> <img
							src="@{'/public/images/Home/how.png'}" alt="About" width="32"
							height="32"> </a>
					</li>


				</ul>

			</div>


			<div id="login">

				#{if logout!=null} ${logout} #{/if} #{if loginMsg!=null} ${loginMsg}
				#{/if}
				<form action="@{Usercontroller.logIn()}" method="GET" class=sigin-in>


					<img src="@{'/public/images/Home/Login.png'}" width="32"
						height="32"> <input type="Email" name="myMail" required
						placeholder="Email" class="signInInput" /> <input type="Password"
						name="myPassword" required placeholder="Password"
						class="signInInput" /> <input id="validate" type="submit"
						value="Login" class="button red" />
				</form>

				<a href="@{Usercontroller.forgotPasswordPage()}">
				<u style="font-family:arial;font-size:11px;">Forgot password?</u> </a>

			</div>


			

		</div>


		<div style="display: none">
			<div id="data" style="width: 500px; height: 300px; overflow: auto;">
				Nowadays, everyone is motivated to think of new ideas to improve
				their surroundings. This is the time for change in everything and
				for the better. Enabling collaborative thinking and management of
				ideas by a large number of people is a challenging process.<br /> <br />
				We would like to introduce our platform that will allow large groups
				(communities) to collaborate in generating, organizing and managing
				their ideas. It enables an organization to deploy such system and
				customising it for their needs. The organizers should also be able
				to schedule the execution of the ideas that is visible to everyone.
				This way, all users will be able to track the status and the
				progress of the ideas turning into reality. <br /> <a
					href="javascript:;" onclick="$.fancybox.close();"><u>Close</u>
				</a>

			</div>
		</div>

		<div id=menu>

			

<ul id="ticker01">
	<li><span>Announcments</span><a href="#">              </a></li>
    <li><span>27 May 2011</span><a href="#">Deadline SE ...</a></li>
    <li><span>30 May 2011</span><a href="#">Evaluation TopSoft..</a></li>
    <li><a href="#">Thanks all for working so hard in this project</a></li>
    <li><a href="#">Thanks Ahmed El Ghoroury</a></li>
    <li><a href="#">Thanks Dr Fatma</a></li>
    <!-- eccetera -->
</ul>


		</div>



		<div id=content>

			<div id=top-border></div>

			#{doLayout /}



		</div>



		<div id=footer>
			<div id=footContent>
			
					
			</div>







		</div>
<div style="clear:both;"></div>


	</div>






</body>

</html>